<html>
    <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <!-- 数据绑定 -->
        <div id="app">
            {{ message }}
        </div>
        <!-- 事件 -->
        <div id="app-2">
            <span v-bind:title="message">
                鼠标悬停几秒钟查看此处信息。                
            </span>
        </div>
        <!-- IF 条件 -->
        <div id="app-3">
            <p v-if="seen">看到了</p>
        </div>
        <!-- for 循环 -->
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>
        <!-- 处理用户输入 -->
        <div id="app-5">
            <p>{{ message }}</p>
            <button v-on:click='reverseMessage'>逆转消息</button>
        </div>

        <div id="app-6">
            <p> {{ message }}</p>
            <input v-model="message" />
        </div>


        <!-- 组件 -->
        <div id="app-7">
            <ol>
                <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"/>
            </ol>
        </div>
        <script type="text/javascript">
        var app = new Vue({
            el : '#app',
            data : {
                message : "Hello Vue"
            }
        });
        var app2 = new Vue({
            el : '#app-2',
            data : {
                message : '页面加载于 ' + new Date().toLocaleString()
            }
        });
        var app3 = new Vue({
            el : "#app-3",
            data : {
                seen : false
            }
        });

        var app4 = new Vue({
            el : "#app-4",
            data : {
                todos : [
                    {text : '学习 Javascript'},
                    {text : '学习 Java'},
                    {text : '学习 Vue'},
                    {text : '学习 Vert.x'},
                ]
            }
        });

        var app5 = new Vue({
            el : '#app-5',
            data : {
                message : 'hello Vue.js',
            },
            methods: {
                reverseMessage : function () {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        });

        var app6 = new Vue({
            el : '#app-6',
            data : {
                message : 'Hello World!'
            }
        });


        Vue.component('todo-item', {
            props : ['todo'],
            template : '<li>{{ todo.text }}</li>'
        });

        var app7 = new Vue({
            el : '#app-7',
            data : {
                groceryList : [
                    {id : 0, text : '蔬菜'},
                    {id : 0, text : '水果'},
                    {id : 0, text : '肉肉'}
                ]
            }
        });
        </script>
    </body>
  </html>